<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改用户信息</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/register.css">
    <link rel="stylesheet" href="css/registerCommon.css">
</head>
<body>
<div class="nav">修改用户信息</div>
<div class="container">
    <!-- 注册对话框 -->
    <div class="dialog">
        <h2>修改密码</h2>
        <div class="row">
            <span id="span-email">邮箱</span>
            <input class="register-input" type="text" id="email" name="email" placeholder="请输入邮箱地址">
        </div>
        <div class="row">
            <span id="span-password">密码</span>
            <input class="register-input" type="password" id="password" name="password" placeholder="请输入密码">
        </div>
        <div class="row">
            <span id="span-confirm">确认</span>
            <input class="register-input" type="password" id="confirm" name="confirm" placeholder="请确认密码">
        </div>
        <div class="row">
            <span id="span-emailCode">验证码</span>
            <input class="register-input" name="emailCode" id="emailCode" placeholder="请输入验证码" type="number">
        </div>
        <div class="emailCode">
            <span onclick="getEmailCode()" style="cursor: pointer;">获取验证码</span>
        </div>
        <div class="row">
            <button class="submit" onclick="update()">提交</button>
        </div>

    </div>

</div>

<script src="js/jQuery.min.js"></script>
<script>
    let countdown;
    const interval = 60; // 倒计时时间，单位为秒
    function getEmailCode() {

        if($('#email').val() === null || $('#email').val() === "") {
            alert("请输入邮箱");
            return;
        }
        const btn = document.querySelector('.emailCode span');
        btn.onclick = null;
        btn.innerHTML = `重新获取(${interval})`;

        countdown = setInterval(() => {
            const remainingTime = parseInt(btn.innerHTML.match(/\d+/)[0]);
            if (remainingTime > 1) {
                btn.innerHTML = `重新获取(${remainingTime - 1})`;
            } else {
                clearInterval(countdown);
                btn.onclick = getEmailCode;
                btn.innerHTML = '获取验证码';
            }
        }, 1000);


        $.ajax({
            url: "/user/sendVerifyCode",
            type: "get",
            data: {
                email: $('#email').val(),
            },
            success(data) {
                if (data.code === "SUCCESS") {
                    alert("验证码发送成功")
                } else {
                    alert(data.errMsg);
                }
            }, error: function () {
                alert("请求发送失败");
            }
        });
    }

    function update() {
        //校验参数
        let pass = true;
        $('.register-input').each(function () {
            let inputValue = $(this).val();
            if (inputValue === null || inputValue === "") {
                const labelText = $(this).prev('span').text();
                pass = false;
                alert("请输入" + labelText);
                return false;
            }
        });
        if (!pass) {
            return;
        }
        if ($('#password').val() != $('#confirm').val()) {
            alert("两次输入密码不一致");
            return;
        }
        $.ajax({
            url: "/user/updatePasswordByEmail",
            type: "post",
            data: {
                email: $('#email').val(),
                password: $('#password').val(),
                confirm: $('#confirm').val(),
                emailCode: $('#emailCode').val()
            },
            success(data) {
                if (data.code === "SUCCESS") {
                    alert(" 修改成功！")
                    location.href = "login.html";
                } else {
                    alert(data.errMsg);
                }
            }
            , error: function () {
                alert("请求发送失败");
            }
        });
    }

</script>
</body>
</html>